<template>
  <div class="welcome-container">
    <div class="welcome-content">
      <h1 class="nickname">{{ nickname || username }}</h1>
      <h2 class="welcome-text">欢迎您</h2>

      <!-- <Upload
        :ossDir="OSS_DIR.AVATAR"
        accept=".jpg,.jpeg,.png"
        :limit="3"
        buttonText="上传头像"
        @upload-success="handleUploadSuccess"
        @upload-error="handleUploadError"
      /> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useUserStore } from "@/store/auth";
import Upload from "@/components/upload/OssUpload.vue";
import { OSS_DIR } from "@/api/oss";

// 获取用户信息
const userStore = useUserStore();
const nickname = computed(() => userStore.nickname);
const username = computed(() => userStore.username);

const handleUploadSuccess = (url: string, file: any) => {
  console.log('上传成功', url, file);
  // 处理成功逻辑
};

const handleUploadError = (error: any, file: any) => {
  console.error('上传失败', error, file);
  // 处理失败逻辑
};
</script>

<style lang="less" scoped>
.welcome-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background-color: white;

  .welcome-content {
    text-align: center;
    padding: 60px 80px;
    animation: fadeInUp 0.6s ease-out;

    .nickname {
      font-size: 56px;
      font-weight: 700;
      margin: 0 0 30px 0;
      letter-spacing: 4px;
      animation: coolTextAnimation 2s ease-out 0.2s both;
      background: linear-gradient(
        135deg,
        #667eea 0%,
        #764ba2 50%,
        #f093fb 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-size: 200% 200%;
      animation: coolTextAnimation 1s ease-out 0.2s both,
        gradientMove 2s ease-in-out infinite;
    }

    .welcome-text {
      font-size: 36px;
      font-weight: 600;
      color: #7f8c8d;
      margin: 0;
      letter-spacing: 3px;
      animation: slideInUp 0.6s ease-out 0.4s both;
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes coolTextAnimation {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.8);
    filter: blur(10px);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-25px) scale(0.9);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
